/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <sf-form ref="form"
             class="formal_dynamic_expansion"
             :label-width="100">
        <div class="form-box__list">
            <div class="form-box__items">
                <instance-number-form
                    ref="defaultInstance"
                    :submit-data="formData.default" />
                <resource-config-form
                    ref="defaultResource"
                    :submit-data="formData.default" />
            </div>
        </div>
    </sf-form>
</template>
<script>

const DEFAULT_VALUE = {
    default:{
        cpuNum:1,
        gpuNum:0,
        memorySize:1,
        minReplicas:1,
        maxReplicas:1
    }
};
import instanceNumberForm from 'src/home/mod_cluster/common/common_form/instance_number_form';
import resourceConfigForm from 'src/home/mod_cluster/common/common_form/resource_config_form';

export default {
    components:{
        instanceNumberForm,
        resourceConfigForm
    },

    data () {
        return {
            formData: { ...DEFAULT_VALUE }
        };
    },
    mounted () {
    },
    methods: {
        getJsonValue () {
            Object.assign(this.formData.default,
                this.$refs.defaultInstance.getJsonValue(),
                this.$refs.defaultResource.getJsonValue());
            return this.formData;
        },

        setJsonValue (data) {
            this.formData = {...DEFAULT_VALUE, ...data};
        }
    }
};
</script>
<style lang="less" scoped>
    .formal_dynamic_expansion{
        padding: 15px 32px;
        .sfv-fieldlabel-left{
            padding-left: 0;
        }
        .form-box__name{
            margin-bottom: 15px;
        }
        .form-box__content{
            background: #F5F5F5;
            border: 1px solid #E0E0E0;
            border-radius: 2px;
            padding-right: 10px;
            width: 427px;
            padding-top: 15px;
        }
        .form-box__list{
            display: flex;
            .form-box__title{
                margin: 15px 0 5px 0;
                font-size: 14px;
                color: #14161A;
                font-weight:bolder;
                display:flex;
                align-items:center;
            }
            .form-box__items{
                &:first-child{
                    margin-right: 30px;
                }
            }
        }
        .form-flex{
            display: flex;
        }

    }
</style>
